<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li class="li3">li3</li>
      <li>li4</li>
      <li>li5</li>
    </ul>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h6>h6</h6>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //:first或first（）	第一个元素
    $("ul li:first").css("color", "red");
    $("ul li").first().css("color", "red");
    //:last或last（）	 最后一个元素
    $("ul li:last").css("color", "pink");
    $("ul li").last().css("color", "pink");
    //:not(selector)		除selector之外的元素
    $("ul li:not(.li3)").css({
      color: "aqua",
    });
    //:even			  偶数 （下标从0开始）
    //$("ul>li:even").mouseover(function(){
    //    $(this).css("color","pink")
    //})
    $("ul>li:even").css("color", "pink");
    //:odd			奇数
    $("ul>li:odd").css("color", "blue");
    //:eq(index)	  第n个元素
    $("ul li:eq(2)").css("color","red")
    $("ul li").eq(3).css("color","black")
    //:gt(index)		大于第n个后的元素
    $("ul li:gt(2)").css("color","black")
    //:lt(index)		小于第n个元素
    $("ul li:lt(2)").css("color","gray")
    //:header			选择h1-h6所有标题元素
    $(":header").css({
      color:"pink",
    })
  </script>
</html>
